<template>
  <div class="card-container">
    <div class="left">
      <div class="des">
        <div>LV:3</div>
        <div>投入：234.00usdt</div>
        <div>剩余：34.00usdt</div>
      </div>
      <div>红财神#23499</div>
    </div>


    <div class="center">
      <div class="center-content">
        <van-image width="0.8rem" height="1rem" fit="cover" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
        <div> 12day</div>
      </div>
      <div class="floating-box">+0.001</div>
    </div>


    <div class="right">
      <div class="des">
        <div>LV:3</div>
        <div>投入：234.00usdt</div>
        <div>剩余：34.00usdt</div>
      </div>
      <div>红财神#23499</div>
    </div>
  </div>
</template>
<script lang="ts" setup>

</script>

<style lang="less" scoped>
.card-container{
  width: calc(100% - 0.2rem);
  box-sizing: border-box;
  height: 1.5rem;
  background-color: aqua;
  display: flex;
  justify-content: space-between;
  .left{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .des{
      text-align: left;
    }
  }
  .center{
    height: 100%;
    background-color: aquamarine;
    position: relative;
    .center-content{
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
  }
  .right{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .des{
      text-align: right;
    }
  }
}

.floating-box {
  height: 0.2rem;
  // background-color: lightblue;
  color: red;
  position: absolute;
  top: 0.1rem;
  left: calc(0.4rem - 0.18rem);
  animation: float-and-fade 2s ease-in-out infinite;
}

@keyframes float-and-fade {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  50% {
    opacity: 1; 
  }
  100% {
    transform: translateY(-0.4rem);
    opacity: 0; 
  }
}
</style>